<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2.vdom和diff算法</title>
</head>

<body>
  虚拟DOM（Virtual DOM），通过JS模拟DOM结构

  Diff算法: 将DOM数遍历算法时间复杂度优化到O(n)
            1.只比较同一层级，不跨级比较
            2.tag不相同，则直接删掉重建，不在深度比较
            3.tag和key，两者都相同，则认为是相同节点，不在深度比较



  <!-- 用js模拟DOM结构 -->
  <div id='div1' class='container'>
    <p>vdom</p>
    <ul style="font-size: 20px;">
      <li>a</li>
    </ul>
  </div>
  <script>
    // 用js模拟上述DOM结构
    const vdom = {
      tag: 'div',
      props: {
        className: 'container',
        id: 'div1'
      },
      children: [
        {
          tag: 'p',
          children: 'vdom'
        },
        {
          tag: 'ul',
          props: {
            style: 'fontSize: 20px'
          },
          children: [
            {
              tag: 'li',
              children: 'a'
            }
          ]
        }
      ]
    }
  </script>
</body>

</html>